<template>
  <div class="detail" v-if="letter" >
    <el-dialog :visible.sync="saveDialogVisible" width="1800px" top="66px">
      <div class="banner">
        <div class="upLoad" v-on:click="getPdf()">
          <img src="../assets/images/upLoad.png" alt />
        </div>
        <div class="contain scrollBar">
          <div class="lz">
            <Icon class="lz" :title="letter.title"></Icon>
          </div>
          <div class="text scrollBar">
            <div id="pdfDom" >
            <div class="top">
              <div class="left">
                <img src="../assets/images/a-1.png" alt />
              </div>
              <div class="right">被举报人</div>
            </div>
            <div class="box">
              <ul>
                <li>
                  <div class="c">
                    <div class="b1">
                      <span class="b1-1 w3">被举报人</span>：
                      <span class="b1-2">{{letter.personName}}</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1">被举报人单位</span>：
                      <span class="b1-2">{{letter.personOrgName}}</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1">被举报人职务：</span>
                      <span class="b1-2">{{letter.personPost}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c">
                    <div class="b1">
                      <span class="b1-1 w3">当前状态</span>
                      ：
                      <span class="b1-2" v-if="letter.status==0">待处理</span>
                      <span class="b1-2" v-if="letter.status==1">已处理</span>
                      <span class="b1-2" v-if="letter.status==2">已驳回</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1 w2">级别</span>：
                      <span class="b1-2">{{letter.personRank}}</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1 w3">问题类型</span>：
                      <span class="b1-2">{{letter.issueType}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c">
                    <div class="b1">
                      <span class="b1-1 w3">问题细类</span>：
                      <span class="b1-2">{{letter.issueChildType}}</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1"></span>
                      <span class="b1-2"></span>
                    </div>
                    <div class="b1">
                      <span class="b1-1"></span>
                      <span class="b1-2"></span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="top detail">
              <div class="left">
                <img src="../assets/images/a-2.png" alt />
              </div>
              <div class="right">举报详情</div>
            </div>
            <div class="text">
              <p>{{letter.content}}</p>
            </div>
            <div class="footer">
              <span class="accessory">附件</span>
              <div class="fuJian">
                <ul>
                  <li v-for="(item,index) in letter.attachList" :key="index">
                    <div class="a">
                      <div class="a1">
                        <img v-if="item.name.slice(-4)=='jpeg'" src="../assets/images/JPEG.png" alt />
                        <img v-if="item.name.slice(-3)=='jpg'" src="../assets/images/JPG.png" alt />
                        <img v-if="item.name.slice(-3)=='png'" src="../assets/images/PNG.png" alt />
                        <img v-if="item.name.slice(-3)=='ppt'" src="../assets/images/PPT.png" alt />
                        <img v-if="item.name.slice(-3)=='pdf'" src="../assets/images/PDF.png" alt />
                        <img v-if="item.name.slice(-3)=='mp4'" src="../assets/images/MP4.png" alt />
                        <img v-if="item.name.slice(-3)=='avi'" src="../assets/images/AVI.png" alt />
                        <img v-if="item.name.slice(-3)=='gif'" src="../assets/images/GIF.png" alt />
                        <img v-if="item.name.slice(-4)=='tiff'" src="../assets/images/TIFF.png" alt />
                        <img v-if="item.name.slice(-3)=='bmp'" src="../assets/images/BMP.png" alt />
                        <img v-if="item.name.slice(-3)=='svg'" src="../assets/images/SVG.png" alt />
                        <img v-if="item.name.slice(-4)=='xlsx'" src="../assets/images/XLSX.png" alt />
                      </div>
                      <div class="a2">
                        <div class="a2-1">{{item.name}}</div>
                        <div class="a2-2">
                          <div class="a2-2-1">{{ (item.size / 1024 / 1024).toFixed(1) + "M" }}</div>
                          <div class="a2-2-2">
                             <span class="b" @click="preview(item.url)">
                              <img src="../assets/images/preview.png" alt class="b-4" />
                               <span class="b-1" >预览</span>
                            </span>
                            
                            <span class="b-2"></span>
                            <span class="b-3" @click="downLoad(item.url)">
                              <img src="../assets/images/down.png" alt class="b-4" />
                               <span class="b-1">下载</span>
                            </span>
                           
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="top detail">
              <div class="left">
                <img src="../assets/images/jubaoxinxi.png" alt />
              </div>
              <div class="right">举报人信息</div>
            </div>
            <div class="box">
              <ul>
                <li>
                  <div class="c">
                    <div class="b1">
                      <span class="b1-1 w1">举报人姓名</span>：
                      <span class="b1-2">{{letter.name}}</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1 w3">身份证号</span>：
                      <span class="b1-2">{{letter.idCard}}</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1 w3">联系方式</span>：
                      <span class="b1-2">{{letter.contactInfo}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c">
                    <div class="b1">
                      <span class="b1-1 w3">政治面貌</span>：
                      <span class="b1-2">{{letter.politicalOutlook}}</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1 w3">现居地址</span>：
                      <span class="b1-2">{{letter.resideAddress}}</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1 w3">工作单位</span>：
                      <span class="b1-2">{{letter.orgName}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c">
                    <div class="b1">
                      <span class="b1-1 w3">举报时间</span>：
                      <span class="b1-2">{{letter.createdTime}}</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1 w3">举报方式</span>：
                      <span class="b1-2" v-if="letter.type==1">匿名举报</span>
                      <span class="b1-2" v-if="letter.type==2">实名举报</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1 w3">举报渠道</span>：
                      <span class="b1-2" v-if="letter.sourceType==1">网页</span>
                      <span class="b1-2" v-if="letter.sourceType==2">二维码</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c">
                    <div class="b1">
                      <span class="b1-1 w4">查询码</span>：
                      <span class="b1-2">{{letter.code}}</span>
                    </div>
                    <div class="b1">
                      <span class="b1-1"></span>
                      <span class="b1-2"></span>
                    </div>
                    <div class="b1">
                      <span class="b1-1"></span>
                      <span class="b1-2"></span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 审核意见 -->
            <div class="top detail">
              <div class="left">
                <img src="../assets/images/shenhe.png" alt />
              </div>
              <div class="right">审核意见</div>
            </div>
            <div class="box">
              <ul>
                <li>
                  <div class="c">
                    <div class="b1">
                      <span class="b1-1">{{letter.approvedTime}}</span>
                      <span class="b1-2">{{letter.approvedBy}}</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c">
                    <div class="b1">
                      <span class="b1-1 w3">审批结果</span>：
                      <span class="b1-2" v-if="letter.status==1">已受理</span>
                      <span class="b1-2" v-if="letter.status==2">已驳回</span>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="c">
                    <div class="b1">
                      <span class="b1-1 w3">审批意见</span>：
                      <span class="b1-2">通过</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Icon from "../components/Icon.vue";
export default {
  props: ["letter"],
  components: {
    Icon,
  },
  data() {
    return {
      htmlTitle: '页面导出PDF文件名',
      saveDialogVisible: false,
    };
  },

  methods: {
    // 下载
    downLoad(val) {
      this.baseUrl = this.$store.state.fileIp + val;
      window.open(this.baseUrl);
    },
    // 预览
    preview(val){
  this.baseUrl = this.$store.state.fileIp + val;
      window.open(this.baseUrl);
    },
    
    
    show() {
      this.saveDialogVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
.lz {
  transform: translate(0, -70%);
  z-index: 9999;
}

/deep/.el-dialog__header {
  background: url("../assets/images/jubao.png") #000080 !important;
  background-position: 20px !important;
  background-repeat: no-repeat !important;
  position: relative;
  padding: 81px 20px 10px 30px;
  box-sizing: border-box;
  width: 100%;
}
/deep/.el-dialog__body {
  padding: 30px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
  background: url(../assets/images/bg.png);
  background-repeat: repeat !important;
  height: 800px !important;
}

.banner {
  width: 1761px;
  height: 850px !important;
  background: url("../assets/images/框1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 70px;
  display: flex;
  padding: 80px 30px 23px 30px;
  box-sizing: border-box;
}
.upLoad {
  position: absolute;
  top: 20px;
  left: 1680px;
}
.contain {
  width: 1750px;
  height: 750px;
  background: url("../assets/images/档案详情2.png");
  background-size: 100% 100%;
  background-repeat: no-repeat !important;
  padding: 38px 0 38px 24px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top {
  display: flex;
}
.w1 {
  letter-spacing: 0.25rem;
  margin-right: -0.25rem;
}
.w2 {
  letter-spacing: 5rem;
  margin-right: -5rem;
}
.w3 {
  letter-spacing: 0.666rem;
  margin-right: -0.666rem;
}
.w4 {
  letter-spacing: 1.5rem;
  margin-right: -1.5rem;
}
.c {
  width: 1665px;
  height: 49px;
  display: flex;
}
.c .b1 {
  width: 555px;
  height: 49px;
  line-height: 49px;
  padding-left: 24px;
  box-sizing: border-box;
}
.c .b1 .b1-1 {
  width: 412px;
  height: 26px;
  font-size: 19px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(6, 255, 255, 1);
  line-height: 26px;
}
.c .b1-2 {
  margin-left: 5px;
}

.detail {
  margin-top: 43px;
}
.right {
  width: 300px;
  height: 40px;
  font-size: 28px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(6, 255, 255, 1);
  line-height: 27px;
  vertical-align: middle;
}
.imgyi {
  position: absolute;
  top: 63px;
  left: 755px;
}
.text {
  overflow-y: auto;
  width: 1670px;
  padding: 24px 0px;
  text-align: left;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 26px;
}
.text p {
  text-align: left;
  text-indent: 2em;
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 36px;
}
.img {
  width: 1006px;
  height: 528px;
  padding: 21px 331px;
  box-sizing: border-box;
  margin-bottom: 61px;
}

.footer {
  width: 100%;
  margin-top: 36px;
}
.accessory {
  display: inline-block;
  width: 44px;
  height: 30px;
  font-size: 22px;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 30px;
}
.fuJian {
  width: 1665px;

  margin-top: 26px;
}
ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.fuJian ul li {
  width: 541px;
  height: 112px;
  background: rgba(0, 9, 122, 0.3);
  box-shadow: 8px 8px 10px 0px rgba(46, 83, 255, 0.28);
  border-radius: 6px;
  border: 2px solid rgba(10, 70, 242, 1);
  margin-bottom: 20px;
}
ul li:nth-child(odd) {
  background: #020b8a;
}
.a {
  width: 498px;
  height: 70px;
  margin: 22px 0 0 22px;
  display: flex;
}
.a2 {
  margin-left: 8px;
}
.a2-1 {
  width: 100%;
  height: 34px;
}
.a2-2 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.a2-2-1 {
 
  height: 22px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 22px;
}
.a2-2-2{
  width:380px;
  display: flex;
  justify-content: flex-end;
}
.b-1 {
  width: 43px;
  height: 23px;
  font-size: 20px;
  font-weight: 400;
  color: rgba(6, 255, 255, 1);
  line-height: 23px;
}
.b-4 {
  margin-right: 6px;
}
.b-2 {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: rgba(6, 255, 255, 1);
  margin: 0 20px;
}
</style>